import type { LoadingProps } from './props'
import { Text, View } from '@tarojs/components'
import classNames from 'classnames'
import { THEME } from '@/constants/theme'
import './loading.scss'

export function Loading({
  visible = true,
  overlay = false,
  fullscreen = false,
  type = 'spinner',
  text = '',
  size = 'medium',
  color = THEME.primary,
  showProgress = false,
  progress,
  className,
  style,
  maskClosable = false,
  onMaskClick,
}: LoadingProps) {
  if (!visible)
    return null

  const handleMaskClick = () => {
    if (maskClosable && onMaskClick) {
      onMaskClick()
    }
  }

  // 渲染不同类型的loading动画
  const renderSpinner = () => {
    switch (type) {
      case 'spinner':
        return (
          <View className={classNames('spinner', `spinner--${size}`)}>
            <View
              className="spinner-ring"
              style={{ '--spinner-color': color } as React.CSSProperties}
            />
          </View>
        )

      case 'dots':
        return (
          <View className={classNames('dots', `dots--${size}`)}>
            <View
              className="dot dot--1"
              style={{ backgroundColor: color }}
            />
            <View
              className="dot dot--2"
              style={{ backgroundColor: color }}
            />
            <View
              className="dot dot--3"
              style={{ backgroundColor: color }}
            />
          </View>
        )

      case 'pulse':
        return (
          <View
            className={classNames('pulse', `pulse--${size}`)}
            style={{ backgroundColor: color }}
          />
        )

      case 'bars':
        return (
          <View className={classNames('bars', `bars--${size}`)}>
            <View
              className="bar bar--1"
              style={{ backgroundColor: color }}
            />
            <View
              className="bar bar--2"
              style={{ backgroundColor: color }}
            />
            <View
              className="bar bar--3"
              style={{ backgroundColor: color }}
            />
            <View
              className="bar bar--4"
              style={{ backgroundColor: color }}
            />
          </View>
        )

      default:
        return null
    }
  }

  const textElement = text && (
    <Text className="loading-text">{text}</Text>
  )

  const progressElement = showProgress && progress !== undefined && (
    <View className="progress-container">
      <View className="progress-bar">
        <View
          className="progress-fill"
          style={{ width: `${progress}%` }}
        />
      </View>
      <Text className="progress-text">
        {Math.round(progress)}
        %
      </Text>
    </View>
  )

  return (
    <View
      className={classNames('app-loading', {
        'app-loading--overlay': overlay,
        'app-loading--fullscreen': fullscreen,
        [className || '']: className,
      })}
      style={style}
      onClick={handleMaskClick}
    >
      <View className="loading-container">
        <View className="loading-spinner">
          {renderSpinner()}
        </View>
        {textElement}
        {progressElement}
      </View>
    </View>
  )
}

export default Loading
